/**
 * 通用组件共同的使用的基础组件，原先放在 adapter/form 内部，限制了使用范围，这里提取出来，方便其他地方使用
 * 可用于 vben-form、vben-modal、vben-drawer 等组件使用,
 */

import type { Component } from 'vue';

import type { BaseFormComponentType } from '@vben/common-ui';
import type { Recordable } from '@vben/types';

import { defineComponent, getCurrentInstance, h, ref } from 'vue';

import { ApiComponent, globalShareState, IconPicker } from '@vben/common-ui';
import { MdiDelete, MdiPlus } from '@vben/icons';
import { $t } from '@vben/locales';

import {
  ElButton,
  ElCheckbox,
  ElCheckboxButton,
  ElCheckboxGroup,
  ElDatePicker,
  ElDivider,
  ElInput,
  ElInputNumber,
  ElNotification,
  ElRadio,
  ElRadioButton,
  ElRadioGroup,
  ElSelectV2,
  ElSpace,
  ElSwitch,
  ElTimePicker,
  ElTreeSelect,
  ElUpload,
} from 'element-plus';

const withDefaultPlaceholder = <T extends Component>(
  component: T,
  type: 'input' | 'select',
  componentProps: Recordable<any> = {},
) => {
  return defineComponent({
    inheritAttrs: false,
    name: component.name,
    setup: (props: any, { attrs, expose, slots }) => {
      const placeholder =
        props?.placeholder ||
        attrs?.placeholder ||
        $t(`ui.placeholder.${type}`);
      // 透传组件暴露的方法
      const innerRef = ref();
      const publicApi: Recordable<any> = {};
      expose(publicApi);
      const instance = getCurrentInstance();
      instance?.proxy?.$nextTick(() => {
        for (const key in innerRef.value) {
          if (typeof innerRef.value[key] === 'function') {
            publicApi[key] = innerRef.value[key];
          }
        }
      });
      return () =>
        h(
          component,
          { ...componentProps, placeholder, ...props, ...attrs, ref: innerRef },
          slots,
        );
    },
  });
};

// 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
export type ComponentType =
  | 'ApiSelect'
  | 'ApiTreeSelect'
  | 'Checkbox'
  | 'CheckboxGroup'
  | 'DatePicker'
  | 'Divider'
  | 'IconPicker'
  | 'Input'
  | 'InputArray'
  | 'InputNumber'
  | 'ObjectArray'
  | 'RadioGroup'
  | 'Select'
  | 'Space'
  | 'Switch'
  | 'TimePicker'
  | 'TreeSelect'
  | 'Upload'
  | BaseFormComponentType;

async function initComponentAdapter() {
  const components: Partial<Record<ComponentType, Component>> = {
    // 如果你的组件体积比较大，可以使用异步加载
    // Button: () =>
    // import('xxx').then((res) => res.Button),
    ApiSelect: withDefaultPlaceholder(ApiComponent, 'select', {
      component: ElSelectV2,
      loadingSlot: 'loading',
      visibleEvent: 'onVisibleChange',
    }),
    ApiTreeSelect: withDefaultPlaceholder(ApiComponent, 'select', {
      component: ElTreeSelect,
      props: { label: 'label', children: 'children' },
      nodeKey: 'value',
      loadingSlot: 'loading',
      optionsPropName: 'data',
      visibleEvent: 'onVisibleChange',
    }),
    Checkbox: ElCheckbox,
    CheckboxGroup: (props, { attrs, slots }) => {
      let defaultSlot;
      if (Reflect.has(slots, 'default')) {
        defaultSlot = slots.default;
      } else {
        const { options, isButton } = attrs;
        if (Array.isArray(options)) {
          defaultSlot = () =>
            options.map((option) =>
              h(isButton ? ElCheckboxButton : ElCheckbox, option),
            );
        }
      }
      return h(
        ElCheckboxGroup,
        { ...props, ...attrs },
        { ...slots, default: defaultSlot },
      );
    },
    // 自定义默认按钮
    DefaultButton: (props, { attrs, slots }) => {
      return h(ElButton, { ...props, attrs, type: 'info' }, slots);
    },
    // 自定义主要按钮
    PrimaryButton: (props, { attrs, slots }) => {
      return h(ElButton, { ...props, attrs, type: 'primary' }, slots);
    },
    Divider: ElDivider,
    IconPicker: withDefaultPlaceholder(IconPicker, 'select', {
      iconSlot: 'append',
      modelValueProp: 'model-value',
      inputComponent: ElInput,
    }),
    Input: withDefaultPlaceholder(ElInput, 'input'),
    InputArray: (props, { attrs }) => {
      // 使用 ref 来管理输入框的值
      const addresses = ref<string[]>(props.modelValue || ['']);

      // 添加输入框
      const addInput = () => {
        addresses.value.push('');
      };

      // 删除输入框
      const removeInput = (index: number) => {
        addresses.value.splice(index, 1);
      };

      // 输入框值变化时触发
      const handleInputChange = (index: number, value: string) => {
        addresses.value[index] = value;
        // 触发 v-model 更新
        attrs['onUpdate:modelValue']?.(addresses.value);
      };

      // 渲染输入框和删除按钮
      const renderInputs = () => {
        return addresses.value.map((address, index) => {
          return h(
            'div',
            {
              key: index,
              style: {
                marginBottom: '10px',
                display: 'flex',
                alignItems: 'center',
              },
            },
            [
              h(ElInput, {
                modelValue: address,
                'onUpdate:modelValue': (val: string) =>
                  handleInputChange(index, val),
                placeholder: $t('ui.placeholder.input'),
                style: { flex: 1, marginRight: '10px' },
              }),
              h(
                ElButton,
                {
                  icon: MdiDelete,
                  link: true,
                  type: 'danger',
                  onClick: () => removeInput(index),
                },
                () => $t('common.delete'),
              ),
            ],
          );
        });
      };

      // 渲染组件
      return h('div', [
        ...renderInputs(),
        h(
          ElButton,
          {
            icon: MdiPlus,
            link: true,
            type: 'primary',
            onClick: addInput,
            style: { marginTop: '10px' },
          },
          () => $t('common.create'),
        ),
      ]);
    },
    ObjectArray: (props, { attrs }) => {
      // 从 props.objDef 获取字段定义，格式为 { key: label } 对象
      const fieldDefinitions = props.objDef || {};

      // 定义对象数组的ref，默认值为空数组或从props.modelValue获取
      const items = ref<Record<string, any>[]>(
        props.modelValue || [createEmptyItem()],
      );

      // 创建空对象（包含所有定义好的字段）
      function createEmptyItem(): Record<string, any> {
        const item: Record<string, any> = {};
        Object.keys(fieldDefinitions).forEach((key) => {
          item[key] = '';
        });
        return item;
      }

      // 添加新项
      const addItem = () => {
        items.value.push(createEmptyItem());
        updateModelValue();
      };

      // 删除项
      const removeItem = (index: number) => {
        items.value.splice(index, 1);
        updateModelValue();
      };

      // 更新项属性
      const updateItemProperty = (index: number, key: string, value: any) => {
        items.value[index] = {
          ...items.value[index],
          [key]: value,
        };
        updateModelValue();
      };

      // 触发v-model更新
      const updateModelValue = () => {
        attrs['onUpdate:modelValue']?.(items.value);
      };

      // 渲染单个字段的输入框
      const renderFieldInput = (
        item: Record<string, any>,
        index: number,
        key: string,
      ) => {
        return h(
          'div',
          {
            style: {
              marginBottom: '8px',
              display: 'flex',
              alignItems: 'center',
            },
          },
          [
            h(
              'span',
              {
                style: {
                  width: '100px',
                  marginRight: '5px',
                  textAlign: 'right',
                },
              },
              fieldDefinitions[key] || key,
            ), // 使用定义中的标签或默认使用key
            h(ElInput, {
              modelValue: item[key] || '',
              'onUpdate:modelValue': (val: any) =>
                updateItemProperty(index, key, val),
              placeholder: $t('ui.placeholder.input'),
              style: { width: '200px' },
            }),
          ],
        );
      };

      // 渲染单个对象项
      const renderItem = (item: Record<string, any>, index: number) => {
        return h(
          'div',
          {
            key: index,
            style: {
              marginBottom: '15px',
              padding: '15px',
              border: '1px solid #ebeef5',
              borderRadius: '4px',
              backgroundColor: '#fafafa',
            },
          },
          [
            // 渲染所有定义好的字段
            ...Object.keys(fieldDefinitions).map((key) =>
              renderFieldInput(item, index, key),
            ),

            // 删除按钮
            h(
              ElButton,
              {
                icon: MdiDelete,
                onClick: () => removeItem(index),
                type: 'danger',
                size: 'small',
                style: {
                  marginTop: '1px',
                },
              },
              () => $t('common.delete'),
            ),
          ],
        );
      };

      // 渲染组件
      return h('div', [
        h(
          ElButton,
          {
            icon: MdiPlus,
            onClick: addItem,
            type: 'primary',
            size: 'small',
            style: { marginBottom: '10px' },
          },
          () => $t('common.create'),
        ),
        ...items.value.map((item, index) => renderItem(item, index)),
      ]);
    },
    InputNumber: withDefaultPlaceholder(ElInputNumber, 'input'),
    RadioGroup: (props, { attrs, slots }) => {
      let defaultSlot;

      if (Reflect.has(slots, 'default')) {
        defaultSlot = slots.default;
      } else {
        const { options, optionType } = attrs;

        if (Array.isArray(options)) {
          defaultSlot = () =>
            options.map((option) => {
              const radioComponent =
                optionType === 'button' ? ElRadioButton : ElRadio;

              const radioProps = {
                value: option.value, // 使用 value 替代 label
                disabled: option.disabled,
                ...option.props,
              };

              return h(
                radioComponent,
                radioProps,
                () => option.label || option,
              );
            });
        }
      }

      return h(
        ElRadioGroup,
        { ...props, ...attrs },
        { ...slots, default: defaultSlot },
      );
    },
    Select: (props, { attrs, slots }) => {
      return h(ElSelectV2, { ...props, attrs }, slots);
    },
    Space: ElSpace,
    Switch: ElSwitch,
    TimePicker: (props, { attrs, slots }) => {
      const { name, id, isRange } = props;
      const extraProps: Recordable<any> = {};
      if (isRange) {
        if (name && !Array.isArray(name)) {
          extraProps.name = [name, `${name}_end`];
        }
        if (id && !Array.isArray(id)) {
          extraProps.id = [id, `${id}_end`];
        }
      }
      return h(
        ElTimePicker,
        {
          ...props,
          ...attrs,
          ...extraProps,
        },
        slots,
      );
    },
    DatePicker: (props, { attrs, slots }) => {
      const { name, id, type } = props;
      const extraProps: Recordable<any> = {};
      if (type && type.includes('range')) {
        if (name && !Array.isArray(name)) {
          extraProps.name = [name, `${name}_end`];
        }
        if (id && !Array.isArray(id)) {
          extraProps.id = [id, `${id}_end`];
        }
      }
      return h(
        ElDatePicker,
        {
          ...props,
          ...attrs,
          ...extraProps,
        },
        slots,
      );
    },
    TreeSelect: withDefaultPlaceholder(ElTreeSelect, 'select'),
    Upload: ElUpload,
  };

  // 将组件注册到全局共享状态中
  globalShareState.setComponents(components);

  // 定义全局共享状态中的消息提示
  globalShareState.defineMessage({
    // 复制成功消息提示
    copyPreferencesSuccess: (title, content) => {
      ElNotification({
        title,
        message: content,
        position: 'bottom-right',
        duration: 0,
        type: 'success',
      });
    },
  });
}

export { initComponentAdapter };
